<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="fromData" :model="fromData" size="small" :inline="true">
          <el-form-item label="请选择太空舱" prop="capsuleInfoId">
            <el-select ref="selectRoom" clearable v-model="fromData.capsuleInfoId" placeholder="请选择太空舱基地">
              <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="--"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 退款列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="capsuleInfoTitle" label="太空舱基地" align="center">
          </el-table-column>
          <el-table-column prop="roomName" label="房间名称" align="center" width="140">
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" align="center">
          </el-table-column>
          <el-table-column prop="refundOrderNo" label="退款申请订单号" align="center">
          </el-table-column>
          <el-table-column prop="refundPrice" label="退款金额" align="center" width="110">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.refundPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="refundReason" label="退款理由" align="center">
          </el-table-column>
          <el-table-column prop="refundOrderStatus" label="退款状态" align="center" width="100">
            <template slot-scope="scope">
              <div class="roomStatus"
                :style="{color:scope.row.refundOrderStatus == 2 ? '#f56c6c' : (scope.row.refundOrderStatus == 1 ? '#5ac725' : (scope.row.refundOrderStatus == 0 ? '#f9ae3d' : '#909399'))}">
                {{scope.row.refundOrderStatus == 0 ? '退款中' : (scope.row.refundOrderStatus == 1 ? '已退款' : (scope.row.refundOrderStatus == 2 ? '异常单' : ''))}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="approveStatus" label="审批状态" align="center" width="100">
            <template slot-scope="scope">
              <div class="roomStatus"
                :style="{color:scope.row.approveStatus == 1 ? '#f56c6c' : (scope.row.approveStatus == 0 ? '#5ac725' : (scope.row.approveStatus == 2 ? '#f9ae3d' : '#909399'))}">
                {{scope.row.approveStatus == 0 ? '已通过' : (scope.row.approveStatus == 1 ? '已拒绝' : (scope.row.approveStatus == 2 ? '审核中' : ''))}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="refundTime" label="退款申请时间" align="center" width="180">
          </el-table-column>
          <el-table-column prop="examineApprove" label="审批" align="center" width="90">
            <template slot-scope="scope">
              <el-button type="danger" size='mini' plain
                :disabled="scope.row.approveStatus == 0 || scope.row.approveStatus == 1 ? true : false"
                @click="onApproveRefund(scope.row.id)">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="退款" :visible.sync="refundVisibles" width="44%" :before-close="refundClose">
      <el-form ref="refundForm" :model="refundForm" label-width="120px" :rules="refund_rules">
        <el-row>
          <el-col :span="22">
            <el-form-item label="开始审批" prop="approveStatus">
              <el-select v-model="refundForm.approveStatus" placeholder="请选择状态">
                <el-option label="通过" value="0"></el-option>
                <el-option label="拒绝" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="refundVisibles = false">取 消</el-button>
        <el-button type="primary" @click="onRefundForm('refundForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    refundPage,
    approveRefund
  } from "@/api/order/order"
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  export default {
    data() {
      return {
        loading: true,
        total: 0,
        tableData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        spaceRoomList: [],
        tiemValue: '',
        fromData: {
          capsuleInfoId: '',
          createBeginTime: "",
          createEndTime: "",
          pageNum: 1,
          pageSize: 10
        },
        refundVisibles: false,
        refundForm: {},
        refund_rules: {
          type: [{
            required: true,
            message: '请选择审批状态',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.refundList()
      capsuleInfoSelects().then(res => {
        this.spaceRoomList = res.data
      })
    },
    methods: {
      refundList() {
        this.fromData.pageNum = this.queryParams.pageNum
        this.fromData.pageSize = this.queryParams.pageSize
        refundPage(this.fromData).then(res => {
          if (res.code == 200) {
            let data = res.data
            this.tableData = data.rows
            this.total = data.total
            this.loading = false
          }
        })
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.refundList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.refundList()
      },
      onSubmitsear() {
        if (this.tiemValue && this.tiemValue.length > 0) {
          this.fromData.createBeginTime = this.tiemValue[0]
          this.fromData.createEndTime = this.tiemValue[1]
        } else {
          this.fromData.createBeginTime = ''
          this.fromData.createEndTime = ''
        }
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.refundList()
      },
      resetQuery() {
        this.fromData = {
          capsuleInfoId: '',
          createBeginTime: "",
          createEndTime: "",
          pageNum: 1,
          pageSize: 10
        }
        this.tiemValue = ''
        this.refundList()
      },
      refundClose() {
        this.refundVisibles = false
      },
      onRefundForm(refundForm) {
        this.$refs[refundForm].validate((valid) => {
          if (valid) {
            approveRefund(this.refundForm).then(res => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.data
                })
                this.refundVisibles = false
                this.refundList()
              } else {
                this.$message({
                  type: 'error',
                  message: res.data
                })
              }
            })
          }
        })
      },
      onApproveRefund(id) {
        this.refundForm.id = id
        this.refundVisibles = true
      }
    }
  }
</script>

<style>

</style>
